<script setup>
import { h,ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import Clipboard from 'clipboard'
import TopBar from '@/components/Topbar/index.vue';
import getRules from "@/validUtils";
import LogistcsInfo from './Components/LogistcsInfo.vue'

const backValue = ref('OrderManagementIndex');
const tabName = ref("订单详情");
const activeName = ref('orderInfo');
const logistcsRef = ref(null);
const ordetStatus = ref(3);
    //复制
const copyText= (name)=>{
    var clipboard = new Clipboard(name)
    clipboard.on('success', () => {
    //  释放内存
    clipboard.destroy()
        ElMessage.success('已复制到剪贴板')
    })
    clipboard.on('error', () =>{
        // 不支持复制
        // 释放内存
        clipboard.destroy()
    })
};
nextTick(()=>{
    setLineWidth();
})
onMounted(()=>{
    $(window).resize(() => {
        setLineWidth();
    });
})
const setLineWidth = ()=>{
    let allWidth = $('.icon-line').outerWidth();

    let lineWidth = (allWidth - 5 * 130)/4+70;
    $('.icon-line .lis .line').css('width',`${ lineWidth }px`);

}

const lookLogistcs = ()=>{
    logistcsRef.value.open();
}
const img1 = ref(new URL("@/assets/images/login-bg3.png",import.meta.url));
const refundHandle = ()=>{
    ElMessageBox(
        {
            confirmButtonText: '确定',
            type: 'warning',
            title: '提示',
            showCancelButton: true,
            message:h('p', null, [
                    h('span', null, '订单未发货，同意后'),
                    h('span', { style: 'color: #FF2440' }, '款项将直接原路返回'),
                ]),
            beforeClose: async (action, instance, done) => {
                if (action === 'confirm') {
                    done()
                } else {
                    done()
                }
            },
        }
    )
}
const refuseRefundHandle = ()=>{
    refoundFlag.value = true;
}
const refoundFlag = ref(false);
const refoundLoading = ref(false);
const refoundForm = ref({
    reason:""
})
const submitRefound = ()=>{

}
</script>
<template>
    <div class="page-contain">
        <TopBar :backValue="backValue" :tabName="tabName">
        </TopBar>
        <div class="info-contain">
            <div class="status-tips">
                <span>订单状态：订单已完成</span>
            </div>
            <div class="status-timeline">

                <div class="icon-line">

                    <div class="lis">
                        <div class="line" :class="{'line-check':ordetStatus>=2}"></div>
                        <div class="img">
                            <img src="@/assets/icon/status-b-1.png" alt="" v-if="ordetStatus>=1">
                            <img src="@/assets/icon/status-g-1.png" alt="" v-else>
                        </div>
                        <div class="p1">买家下单</div>
                        <div class="p2">2021-08-01 12:23:23</div>
                    </div>
                    <div class="lis">
                        <div class="line" :class="{'line-check':ordetStatus>=3}"></div>
                        <div class="img">
                            <img src="@/assets/icon/status-b-2.png" alt="" v-if="ordetStatus>=2">
                            <img src="@/assets/icon/status-g-2.png" alt="" v-else>
                        </div>
                        <div class="p1">付款成功</div>
                        <div class="p2">2021-08-01 12:23:23</div>
                    </div>
                    <div class="lis">
                        <div class="line" :class="{'line-check':ordetStatus>=4}"></div>
                        <div class="img">
                            <img src="@/assets/icon/status-b-3.png" alt="" v-if="ordetStatus>=3">
                            <img src="@/assets/icon/status-g-3.png" alt="" v-else>
                        </div>
                        <div class="p1">商家发货</div>
                        <div class="p2">2021-08-01 12:23:23</div>
                    </div>
                    <div class="lis">
                        <div class="line" :class="{'line-check':ordetStatus>=5}"></div>
                        <div class="img">
                            <img src="@/assets/icon/status-b-4.png" alt="" v-if="ordetStatus>=4">
                            <img src="@/assets/icon/status-g-4.png" alt="" v-else>
                        </div>
                        <div class="p1">买家签收</div>
                        <div class="p2">2021-08-01 12:23:23</div>
                    </div>
                    <div class="lis">
                        <div class="img">
                            <img src="@/assets/icon/status-b-5.png" alt="" v-if="ordetStatus>=5">
                            <img src="@/assets/icon/status-g-5.png" alt="" v-else>
                        </div>
                        <div class="p1">确认收货</div>
                        <div class="p2">2021-08-01 12:23:23</div>
                    </div>
                </div>

            </div>
            <div class="fgf"></div>
            <div class="detail-info" :style="{height:`calc(100% - 12px - 138px - 48px)`}">
                <el-tabs v-model="activeName" class="demo-tabs" >
                    <el-tab-pane label="订单信息" name="orderInfo">
                        <div class="tab-contain">
                            <div class="info-block">
                                <div class="lis">
                                    <div class="lis-head">
                                        <div class="icon-view">
                                            <div class="icon-view-on"></div>
                                        </div>
                                        <span class="label-name">交易信息</span>
                                    </div>
                                    <div class="lis-line">
                                        <div class="line-lable">
                                            订单编号：
                                        </div>
                                        <div class="line-info">
                                            KD2021080900001
                                            <div class="a-link copy-div" style="margin-left:4px" data-clipboard-text="我是大聪明" @click="copyText('.copy-div')">复制</div>
                                        </div>
                                    </div>
                                    <div class="lis-line">
                                        <div class="line-lable">
                                            创建时间：
                                        </div>
                                        <div class="line-info">
                                            2021-08-02 12:23:23
                                        </div>
                                    </div>
                                    <div class="lis-line">
                                        <div class="line-lable">
                                            付款时间：
                                        </div>
                                        <div class="line-info">
                                            2021-08-02 12:23:23
                                        </div>
                                    </div>
                                    <div class="lis-line">
                                        <div class="line-lable">
                                            订单备注：
                                        </div>
                                        <div class="line-info">
                                           12312312222222222222222222222222222222222222啊实打实大萨达阿萨德阿萨德阿是阿萨大大
                                           asdasdasdasdasdasssssssssssssssssssssssssssssssssssssssssssssssssssasdasasdasdasdasdasdasssssssssssssssssssssssssssssssssssssssssssssssssssasdas
                                        </div>
                                    </div>
                                </div>
                                <div class="lis">
                                    <div class="lis-head">
                                        <div class="icon-view">
                                            <div class="icon-view-on"></div>
                                        </div>
                                        <span class="label-name">买家信息</span>
                                    </div>
                                    <div class="lis-line">
                                        <div class="line-lable">
                                            门店名称：
                                        </div>
                                        <div class="line-info">
                                            KD2021080900001
                                        </div>
                                    </div>
                                    <div class="lis-line">
                                        <div class="line-lable">
                                            用户名：
                                        </div>
                                        <div class="line-info">
                                            2021-08-02 12:23:23
                                        </div>
                                    </div>
                                    <div class="lis-line">
                                        <div class="line-lable">
                                            联系电话：
                                        </div>
                                        <div class="line-info">
                                            2021-08-02 12:23:23
                                        </div>
                                    </div>

                                </div>
                                <div class="lis">
                                    <div class="lis-head">
                                        <div class="icon-view">
                                            <div class="icon-view-on"></div>
                                        </div>
                                        <span class="label-name">物流信息</span>
                                    </div>
                                    <div class="lis-line">
                                        <div class="line-lable">
                                            物流公司：
                                        </div>
                                        <div class="line-info">
                                            KD2021080900001
                                            <div class="a-link copy-div" style="margin-left:4px" @click="lookLogistcs()">查看物流</div>
                                        </div>
                                    </div>
                                    <div class="lis-line">
                                        <div class="line-lable">
                                            运单号：
                                        </div>
                                        <div class="line-info">
                                            2021-08-02 12:23:23
                                        </div>
                                    </div>
                                    <div class="lis-line">
                                        <div class="line-lable">
                                            收货地址：
                                        </div>
                                        <div class="line-info">
                                            浙江省宁波市镇海区骆驼街道民和路800号九为网络科技有限公司4楼，显示不下换行最多显示三行，显示不下换行，最多显示三行三行再多...
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="goods-table">
                                <div class="th">
                                    <div class="td" style="width: calc(100% - (4 * 190px));"><div class="lable-name">商品名称</div></div>
                                    <div class="td" style="width: 190px;"><div class="lable-name">单价/数量</div></div>
                                    <div class="td" style="width: 190px;"><div class="lable-name">售后</div></div>
                                    <div class="td" style="width: 190px;"><div class="lable-name">优惠信息</div></div>
                                    <div class="td" style="width: 190px;"><div class="lable-name" style="border-right:0">实收款</div></div>
                                </div>
                                <div class="order-table" >
                                <div class="tr" >
                                    <div class="lis" v-for="(lis,i) in [1,2,3]" :key="i">
                                        <div class="td" style="width: calc(100% - (4 * 190px));">
                                           <div class="img"></div> 
                                           <div class="good-name">
                                                <div class="p1">
                                                    [品牌]阿莫西林胶囊阿莫西林胶囊展示不下换行换行换行展示阿莫西林胶囊阿莫西林胶囊展示不下换行换行换行展示
                                                </div>
                                                <div class="p2">15g*6袋</div>
                                           </div>
                                        </div>
                                        <div class="td" style="width: 190px;">
                                            <div style="width:100%">
                                                <div style="color:#222;width:100%;font-weight:bold;font-size:14px;line-height: 14px;margin-bottom:8px">¥25.00</div>
                                                <div style="color:#666;width:100%;font-weight:400;font-size:14px;line-height: 14px">x2</div>
                                            </div>
                                           
                                        </div>
                                        <div class="td" style="width: 190px;">
                                            <span style="color:#222;width:100%;font-weight:400;font-size:14px;line-height: 14px">退款成功</span>
                                        </div>
                                        <div class="td" style="width: 190px;">
                                            <span style="color:#222;width:100%;font-weight:400;font-size:14px;line-height: 14px">优惠券：-¥25.00</span>
                                        </div>
                                        <div class="td" style="width: 190px;">
                                            <div style="width:100%">
                                                <div style="color:#222;width:100%;font-weight:bold;font-size:18px;line-height: 18px;margin-bottom:8px">¥25.00</div>
                                                <div style="color:#222;width:100%;font-weight:400;font-size:14px;line-height: 14px">含运费：¥10.00</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="退款信息" name="refundInfo">
                        <div class="tab-contain">
                            <div class="refund-lis" v-for="(item,index) in [1,2]" :key="index">
                                <div class="refund-header">
                                    <span class="s-title">退款编号：</span>
                                    <span>TH202302230000001</span>
                                    <span class="a-link">复制</span>
                                </div>
                                <div class="refund-body">
                                    <div class="refund-info">
                                        <div class="refund-info-status">
                                            <div class="status-text">
                                                <div class="p1">商家处理中</div>
                                                <div class="p2">还剩2天4时25分</div>
                                            </div>
                                            <div class="status-button">
                                                <el-button type="primary" @click="refundHandle()">同意退回款项</el-button>
                                                <el-button type="danger" @click="refuseRefundHandle()">拒绝退款</el-button>
                                            </div>
                                        </div>
                                        <div class="other-info">
                                            <div class="other-info-lis">
                                                <div class="lis-line">
                                                    <div class="line-lable">
                                                        退款类型：  
                                                    </div>
                                                    <div class="line-info">
                                                        退货退款
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="other-info-lis">
                                                <div class="lis-line">
                                                    <div class="line-lable">
                                                        申请时间：  
                                                    </div>
                                                    <div class="line-info">
                                                        2021-08-02 12:23:23
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="info-block" style="margin-top:20px">
                                    <div class="lis">
                                        <div class="lis-head">
                                            <div class="icon-view">
                                                <div class="icon-view-on"></div>
                                            </div>
                                            <span class="label-name">交易信息</span>
                                        </div>
                                        <div class="lis-line">
                                            <div class="line-lable">
                                                订单编号：
                                            </div>
                                            <div class="line-info">
                                                KD2021080900001
                                                <div class="a-link copy-div" style="margin-left:4px" data-clipboard-text="我是大聪明" @click="copyText('.copy-div')">复制</div>
                                            </div>
                                        </div>
                                        <div class="lis-line">
                                            <div class="line-lable">
                                                创建时间：
                                            </div>
                                            <div class="line-info">
                                                2021-08-02 12:23:23
                                            </div>
                                        </div>
                                        <div class="lis-line">
                                            <div class="line-lable">
                                                付款时间：
                                            </div>
                                            <div class="line-info">
                                                2021-08-02 12:23:23
                                            </div>
                                        </div>
                                        <div class="lis-line">
                                            <div class="line-lable">
                                                订单备注：
                                            </div>
                                            <div class="line-info">
                                            12312312222222222222222222222222222222222222啊实打实大萨达阿萨德阿萨德阿是阿萨大大
                                            asdasdasdasdasdasssssssssssssssssssssssssssssssssssssssssssssssssssasdasasdasdasdasdasdasssssssssssssssssssssssssssssssssssssssssssssssssssasdas
                                            </div>
                                        </div>
                                    </div>
                                    <div class="lis">
                                        <div class="lis-head">
                                            <div class="icon-view">
                                                <div class="icon-view-on"></div>
                                            </div>
                                            <span class="label-name">买家信息</span>
                                        </div>
                                        <div class="lis-line">
                                            <div class="line-lable">
                                                门店名称：
                                            </div>
                                            <div class="line-info">
                                                KD2021080900001
                                            </div>
                                        </div>
                                        <div class="lis-line">
                                            <div class="line-lable">
                                                用户名：
                                            </div>
                                            <div class="line-info">
                                                2021-08-02 12:23:23
                                            </div>
                                        </div>
                                        <div class="lis-line">
                                            <div class="line-lable">
                                                联系电话：
                                            </div>
                                            <div class="line-info">
                                                2021-08-02 12:23:23
                                            </div>
                                        </div>
                                        <div class="lis-line">
                                            <div class="line-lable">
                                                图片：
                                            </div>
                                            <div class="line-info">
                                                <div style="width:100%;position: relative;display:flex;justify-content:flex-start;flex-wrap:wrap">

                                                    <el-image
                                                    :src="img1"
                                                    :zoom-rate="1.2"
                                                    :preview-src-list="[img1]"
                                                    :initial-index="4"
                                                    style="width:88px;height:88px;margin-right:24px"
                                                    v-for="(item,index) in [1,2,3,4]"
                                                    :key="index"
                                                    />

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="lis">
                                        <div class="lis-head">
                                            <div class="icon-view">
                                                <div class="icon-view-on"></div>
                                            </div>
                                            <span class="label-name">物流信息</span>
                                        </div>
                                        <div class="lis-line">
                                            <div class="line-lable">
                                                物流公司：
                                            </div>
                                            <div class="line-info">
                                                KD2021080900001
                                                <div class="a-link copy-div" style="margin-left:4px" @click="lookLogistcs()">查看物流</div>
                                            </div>
                                        </div>
                                        <div class="lis-line">
                                            <div class="line-lable">
                                                运单号：
                                            </div>
                                            <div class="line-info">
                                                2021-08-02 12:23:23
                                            </div>
                                        </div>
                                        <div class="lis-line">
                                            <div class="line-lable">
                                                收货地址：
                                            </div>
                                            <div class="line-info">
                                                浙江省宁波市镇海区骆驼街道民和路800号九为网络科技有限公司4楼，显示不下换行最多显示三行，显示不下换行，最多显示三行三行再多...
                                            </div>
                                        </div>

                                    </div>
                                    </div>
                                    <div class="goods-table">
                                        <div class="th">
                                            <div class="td" style="width: calc(100% - (4 * 190px));"><div class="lable-name">商品名称</div></div>
                                            <div class="td" style="width: 190px;"><div class="lable-name">单价/数量</div></div>
                                            <div class="td" style="width: 190px;"><div class="lable-name">售后</div></div>
                                            <div class="td" style="width: 190px;"><div class="lable-name">优惠信息</div></div>
                                            <div class="td" style="width: 190px;"><div class="lable-name" style="border-right:0">实收款</div></div>
                                        </div>
                                        <div class="order-table" >
                                        <div class="tr" >
                                            <div class="lis" v-for="(lis,i) in [1,2,3]" :key="i">
                                                <div class="td" style="width: calc(100% - (4 * 190px));">
                                                <div class="img"></div> 
                                                <div class="good-name">
                                                        <div class="p1">
                                                            [品牌]阿莫西林胶囊阿莫西林胶囊展示不下换行换行换行展示阿莫西林胶囊阿莫西林胶囊展示不下换行换行换行展示
                                                        </div>
                                                        <div class="p2">15g*6袋</div>
                                                </div>
                                                </div>
                                                <div class="td" style="width: 190px;">
                                                    <div style="width:100%">
                                                        <div style="color:#222;width:100%;font-weight:bold;font-size:14px;line-height: 14px;margin-bottom:8px">¥25.00</div>
                                                        <div style="color:#666;width:100%;font-weight:400;font-size:14px;line-height: 14px">x2</div>
                                                    </div>
                                                
                                                </div>
                                                <div class="td" style="width: 190px;">
                                                    <span style="color:#222;width:100%;font-weight:400;font-size:14px;line-height: 14px">退款成功</span>
                                                </div>
                                                <div class="td" style="width: 190px;">
                                                    <span style="color:#222;width:100%;font-weight:400;font-size:14px;line-height: 14px">优惠券：-¥25.00</span>
                                                </div>
                                                <div class="td" style="width: 190px;">
                                                    <div style="width:100%">
                                                        <div style="color:#222;width:100%;font-weight:bold;font-size:18px;line-height: 18px;margin-bottom:8px">¥25.00</div>
                                                        <div style="color:#222;width:100%;font-weight:400;font-size:14px;line-height: 14px">含运费：¥10.00</div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <LogistcsInfo ref="logistcsRef"></LogistcsInfo>
        <el-dialog v-model="refoundFlag" title="提示" width="380px">
            <div style="width:100%">
                <div style="color: #222222;font-size: 14px; line-height: 14px;margin-bottom:8px">请提前和买家沟通一致</div>
                <el-form :model="refoundForm" label-width="0px" >
                    <el-form-item label="" :rules="getRules('input', '发货方式')" prop="reason">
                        <el-input v-model="refoundForm.reason" placeholder="请输入拒绝原因" style="width:340px;" :rows="5" type="textarea"/>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="refoundFlag = false">取消</el-button>
                    <el-button type="primary" :loading="refoundLoading" @click="submitRefound">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<style lang="less" scoped>
.refund-lis{
    width: 100%;
    box-sizing: border-box;
    border:1px solid #DDDDDD;
    margin-bottom:20px;
    &:last-child{
        margin-bottom:0;
    }
    .refund-header{
        width: 100%;
        height: 36px;
        background: #DDDDDD;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding:0 10px;
        font-size: 14px;
        line-height: 14px;
        color:#222222;
        .s-title{
            color:#000;
            font-weight: bold;
        }
        .a-link{
            cursor: pointer;
            color:#3480FF;
            margin-left:4px;
        }
    }
    .refund-body{
        width: 100%;
        box-sizing: border-box;
        padding:12px;
        .refund-info{
            width: 100%;
            border-bottom:1px solid #DDDDDD;
            .other-info{
                width: 100%;
                display: flex;
                justify-content: flex-start;
                .other-info-lis{
                    width: calc(100% / 3);
                    margin-bottom:20px;
                    .lis-line{
                        width: 100%;
                        display: flex;
                        justify-content: flex-start;

                        .line-lable{
                            width: 70px;
                            line-height: 20px;
                            font-size: 14px;
                            color: #222222;
                            text-align: right;
                        }
                        .line-info{
                            width: calc(100% - 70px);
                            line-height: 14px;
                            font-size: 14px;
                            color: #222222;
                            display: flex;
                            justify-content: flex-start;
                            word-break: break-all;
                            word-wrap: break-word;
                            line-height: 20px;
                        }
                    }
                }
            }
            .refund-info-status{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom:12px;
                .status-button{
                    display: flex;
                    justify-content: flex-start;
                }
                .status-text{
                    display: flex;
                    justify-content: flex-start;
                    .p1{
                        color: #ffab00;
                        font-size: 18px;
                        font-weight: bold;
                        line-height: 18px;
                    }
                    .p2{
                        color: #FF2440;
                        font-size: 14px;
                        margin-left:8px;
                        line-height: 18px;
                    }
                }
            }
        }
    }
}
.goods-table{
    width: 100%;
    margin-top:20px;
    .th{
        width: 100%;
        height: 46px;
        display: flex;
        justify-content: flex-start;
        .td{
            height: 100%;
            display: flex;
            box-sizing: border-box;
            padding-left:16px;
            align-items: center;
            .lable-name{
                width: 100%;
                border-right: 1px solid #ddd;
                height: 14px;
                box-sizing: border-box;
                color: #000000;
                font-size: 14px;
                font-weight: bold;
                line-height: 14px;
            }

        }
    }
    .order-table{
        width: 100%;
        .tr{
            width: 100%;


            .lis{
                width: 100%;
                display: flex;
                justify-content: flex-start;
                
                &:nth-child(odd){
                    background: #F9F9F9;
                }
                &:nth-child(even){
                    background: #fff;
                }
                .td{
                    padding:16px;
                    display: flex;justify-content: flex-start;align-items: center;

                    box-sizing: border-box;
                    .btn-line{
                        width: 100%;
                        margin-bottom:8px;
                        span{
                            color:#3480FF;
                            font-size: 14px;
                            font-weight: 400;
                            line-height: 14px;
                            cursor: pointer;
                        }
                        &:last-child{
                            margin-bottom: 0;
                        }
                    }
                    .img{
                        width: 48px;
                        height: 48px;
                        border:1px solid #ddd;
                        border-radius: 3px;
                    }
                    .good-name{
                        width: calc(100% - 48px);
                        box-sizing: border-box;
                        padding-left:8px;
                        .p1{
                            color:#3480FF;
                            cursor: pointer;
                            font-weight: bold;
                            width: 100%;
                            line-height: 21px;
                            overflow: hidden; /* 溢出隐藏，因为该多行溢出隐藏只是第n行最后显示省略号，其实n+行还是有的，要通过溢出隐藏将其藏起来不显示 */
                            -webkit-line-clamp: 2; /* 限制超过多少行显示省略号 */
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            margin-bottom:4px;
                            font-size: 14px;
                        }
                        .p2{
                            color:#666666;
                            font-weight: 400;
                            width: 100%;
                            font-size: 14px;
                            line-height: 16px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            
                        }
                    }
                }
            }
            &:last-child{
                margin-bottom: 0;
            }
        }
    }
}
.lis-head{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom:16px;
    .icon-view{
        margin-right: 8px;
        position: relative;
        width: 14px;
        height: 14px;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            background-color: #10E7F9; 
        }
        .icon-view-on{
            position: absolute;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            background-color: #3480FF; /* 背景色 */
        }
    }
    .label-name{
        color: #000000;
        font-weight: bold;
        font-size: 14px;
        margin-right: 8px;
    }
    img{
        width: 14px;
        height: 14px;
        cursor: pointer;
    }
}
.tab-contain{
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding:24px;
    padding-top:0;
    .info-block{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        .lis{
            width: calc(100% / 3);
            .lis-line{
                width: 100%;
                display: flex;
                justify-content: flex-start;
                margin-bottom:12px;
                &:last-child{
                    margin-bottom:0;
                }
                .line-lable{
                    width: 70px;
                    line-height: 20px;
                    font-size: 14px;
                    color: #222222;
                    text-align: right;
                }
                .line-info{
                    width: calc(100% - 70px);
                    line-height: 14px;
                    font-size: 14px;
                    color: #222222;
                    display: flex;
                    justify-content: flex-start;
                    word-break: break-all;
                    word-wrap: break-word;
                    line-height: 20px;
                    .a-link{
                        cursor: pointer;
                        color:#3480FF;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
.page-contain{
    width: 100%;
    height: 100%;
    .info-contain{
        width: 100%;
        height: calc(100% - 48px);
        box-sizing: border-box;
        .detail-info{
            width: 100%;
            
        }
        .fgf{
            width: 100%;
            background: #F6F6F6;
            height: 12px;

        }
        .status-timeline{
            width: 100%;
            height: 138px;
            box-sizing: border-box;
            padding:16px 56px;
            

            .icon-line{
                width: 100%;
                height: 100%;
                display: flex;
                position: relative;
                justify-content: space-between;
            }
            .lis{
                width: 130px;
                position: relative;
                .line{
                    position: absolute;
                    height: 2px;
                    background: #ddd;
                    top:29px;
                    left:95px;
                    
                }
                .line-check{
                    background: #DAE8FF;
                }
                .img{
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    img{
                        width: 60px;
                        height: 60px;
                    }
                }
                .p1{
                    font-size: 14px;
                    line-height: 14px;
                    color:#000000;
                    margin-top:12px;
                    width: 100%;
                    text-align: center;
                }
                .p2{
                    font-size: 12px;
                    line-height: 12px;
                    color:#666666;
                    margin-top:8px;
                    width: 100%;
                    text-align: center;
                }
            }
        }
        .status-tips{
            width: 100%;
            height: 48px;
            background: rgba(52, 128, 255, 0.05);
            box-sizing: border-box;
            padding:0 24px;
            display: flex;
            align-items: center;
            span{
                color:#303133;
                line-height: 16px;
                font-size: 16px;
                font-weight: bold;
            }
        }

    }
}
</style>